<template>
	<view class="container">
		<view class="form-card">
			<view class="form-group">
				<view class="form-item avatar-item">
					<text class="label">头像</text>
					<view class="avatar-wrapper" @click="changeAvatar">
						<image :src="form.avatar || '/static/images/default-avatar.png'" class="avatar"></image>
						<text class="change-avatar">更换头像</text>
					</view>
				</view>
				
				<view class="form-item">
					<text class="label">昵称</text>
					<input class="input" v-model="form.nickname" placeholder="请输入昵称" />
				</view>
				
				<view class="form-item">
					<text class="label">性别</text>
					<view class="gender-options">
						<view class="gender-option" :class="{'active': form.gender === 1}" @click="form.gender = 1">
							<u-icon name="man" color="#007aff" size="32"></u-icon>
							<text>男</text>
						</view>
						<view class="gender-option" :class="{'active': form.gender === 2}" @click="form.gender = 2">
							<u-icon name="woman" color="#ff6a9c" size="32"></u-icon>
							<text>女</text>
						</view>
						<view class="gender-option" :class="{'active': form.gender === 0}" @click="form.gender = 0">
							<u-icon name="question-circle" color="#999" size="32"></u-icon>
							<text>保密</text>
						</view>
					</view>
				</view>
				
				<view class="form-item">
					<text class="label">手机号</text>
					<view class="phone-display">
						<text>{{formatPhone(form.phone)}}</text>
						<navigator url="/pages/user/bind-phone" class="edit-btn" v-if="!form.phone">
							<u-icon name="edit-pen" size="32" color="#007aff"></u-icon>
						</navigator>
					</view>
				</view>
			</view>
			
			<view class="form-footer">
				<view class="save-btn" @click="saveProfile">保存</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					nickname: '',
					avatar: '',
					gender: 0, // 0: 保密, 1: 男, 2: 女
					phone: ''
				}
			}
		},
		onLoad() {
			this.getUserInfo();
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				// 先从本地存储获取
				const userInfoStorage = uni.getStorageSync('userInfo');
				if (userInfoStorage) {
					this.form = {
						nickname: userInfoStorage.nickname || '',
						avatar: userInfoStorage.avatar || '',
						gender: userInfoStorage.gender || 0,
						phone: userInfoStorage.phone || ''
					};
				}
				
				// 再从接口获取最新信息
				this.$api.getUserInfo()
					.then(res => {
						this.form = {
							nickname: res.nickname || '',
							avatar: res.avatar || '',
							gender: res.gender || 0,
							phone: res.phone || ''
						};
					})
					.catch(err => {
						console.error('获取用户信息失败:', err);
					});
			},
			
			// 修改头像
			changeAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						
						// 上传图片
						uni.showLoading({
							title: '上传中...'
						});
						
						this.$api.uploadFile(tempFilePaths[0])
							.then(data => {
								this.form.avatar = data.url;
								uni.hideLoading();
								uni.showToast({
									title: '头像上传成功',
									icon: 'success'
								});
							})
							.catch(err => {
								uni.hideLoading();
								uni.showToast({
									title: '上传图片失败',
									icon: 'none'
								});
								console.error('上传失败:', err);
							});
					}
				});
			},
			
			// 格式化手机号
			formatPhone(phone) {
				if (!phone) return '未绑定';
				return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
			},
			
			// 保存个人资料
			saveProfile() {
				if (!this.form.nickname) {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					});
					return;
				}
				
				uni.showLoading({
					title: '保存中...'
				});
				
				// 调用更新接口
				this.$api.updateUserInfo({
					nickname: this.form.nickname,
					avatar: this.form.avatar,
					gender: this.form.gender
				})
				.then(res => {
					// 更新本地存储的用户信息
					const userInfo = uni.getStorageSync('userInfo');
					if (userInfo) {
						userInfo.nickname = this.form.nickname;
						userInfo.avatar = this.form.avatar;
						userInfo.gender = this.form.gender;
						uni.setStorageSync('userInfo', userInfo);
					}
					
					uni.hideLoading();
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					});
					
					// 返回上一页
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				})
				.catch(err => {
					uni.hideLoading();
					console.error('保存失败:', err);
					uni.showToast({
						title: err.message || '保存失败，请稍后重试',
						icon: 'none'
					});
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 30rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.form-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.form-group {
		margin-bottom: 30rpx;
	}
	
	.form-item {
		padding: 20rpx 0;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.form-item:last-child {
		border-bottom: none;
	}
	
	.label {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 15rpx;
	}
	
	.input {
		height: 80rpx;
		font-size: 32rpx;
		color: #333;
	}
	
	.avatar-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 30rpx;
	}
	
	.avatar-wrapper {
		position: relative;
		width: 150rpx;
		height: 150rpx;
		border-radius: 75rpx;
		overflow: hidden;
		margin: 20rpx 0;
	}
	
	.avatar {
		width: 100%;
		height: 100%;
	}
	
	.change-avatar {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 24rpx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.5);
	}
	
	.gender-options {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
	}
	
	.gender-option {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 40rpx;
		border-radius: 8rpx;
		transition: all 0.3s;
	}
	
	.gender-option.active {
		background-color: #f0f8ff;
	}
	
	.gender-option text {
		font-size: 28rpx;
		color: #333;
		margin-top: 10rpx;
	}
	
	.phone-display {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 0;
	}
	
	.phone-display text {
		font-size: 32rpx;
		color: #333;
	}
	
	.edit-btn {
		padding: 10rpx;
	}
	
	.form-footer {
		margin-top: 60rpx;
	}
	
	.save-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #007aff;
		color: #fff;
		text-align: center;
		font-size: 32rpx;
		border-radius: 40rpx;
	}
</style>
